/*!
 * @author Isis (igraziatto) Graziatto <isis.g@vanillaforums.com>
 * @copyright 2009-2018 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

/* -------------------------------------------------------------- *\
    Styles
\* -------------------------------------------------------------- */

.Header {
    background-color: $header_bg;
    color: $header_fg;
    border-bottom: $header_border;
    box-shadow: $header_boxShadow;

    .row {
        display: flex;
        align-items: center;
        height: $header_minHeight;
    }

    .mobileMeBox-button,
    .Hamburger {
        display: none;

        @include maxWidth {
            display: flex;
        }
    }

    // Mebox component
    .MeButton {
        color: $headerMebutton_fg;
        background-color: $headerMebutton_bg;

        &:focus,
        &:hover,
        &:active {
            color: $headerMebutton-hover_fg;
            background-color: $headerMebutton-hover_bg;

            .Alert {
                color: $headerMeBoxAlert_fg;
                background-color: $headerMeBoxAlert_bg;
                border-color: $headerMeBoxAlert_borderColor;
            }
        }
    }

    .ToggleFlyout.Open .MeButton {
        background-color: $headerMebutton-active_bg;
    }

    .WhoIs > .Username {
        color: $headerMebutton_fg;
    }

    .SignInLinks {
        a {
            @include Button(
                $headerButton_bg,
                $headerButton_fg,
                $headerButton_borderColor,
                $headerButton-hover_bg,
                $headerButton-hover_fg,
                $headerButton-hover_borderColor
            );
        }
    }
}

.Header-logo {
    padding: $utility-baseUnitHalf 0;
    display: flex;
    align-items: center;
    flex-basis: 160px;
    @if ($staticVariables) {
        color: $header-link_color;

        &:hover,
        &:focus,
        &:active {
            color: $header-link-hover_color;
        }
    }

    img {
        max-height: $header_minHeight - 20px;
        width: auto;
        height: auto;
    }

    @include maxWidth {
        display: none;
        flex-basis: initial;
    }
}

.Header-desktopNav {
    display: flex;
    align-items: center;

    @include maxWidth {
        display: none;
    }

    .Navigation-linkContainer a {
        border-radius: 3px;
        margin: 0 6px;
        padding: 0 6px;
        height: 36px;
        font-size: $global-medium_fontSize;
        display: flex;
        align-items: center;
        justify-content: center;

        @if ($staticVariables) {
            color: $header-link_color;

            &:hover,
            &:focus,
            &:active {
                color: $header-link-hover_color;
                background: $global-color_primaryAlt;
            }
        }
    }

    .Navigation-linkContainer::after {
        display: none;
    }
}

.Header-desktopCommunityChooser.Header-desktopCommunityChooser {
    @include maxWidth {
        display: none;
    }
}

.Header-flexSpacer {
    flex: 1;

    @include maxWidth {
        display: none;
    }
}

.Header-logo.mobile {
    display: none;

    @include maxWidth {
        margin-left: auto;
        display: flex;
    }
}

.Header-right {
    margin-left: auto;
    display: flex;
    align-self: stretch;
    align-items: center;
}

// IE 11 specific bug
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .Header-logo img {
        max-height: unset;
    }
}
